<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/pop-ups.css"><!--弹出层-->
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">
    <title>系列专题</title>
    <style>
        body {
            background-color: white;
        }

        .series-topics-item {
            padding-bottom: 22px;
            border-radius: 4px;
            box-shadow: 0 0 0.32rem 0 rgba(0, 0, 0, 0.1);
        }

        .series-topics-item-img {
            width: 100%;
            height: 3.12rem;
        }

        .series-topics-item-img img {
            width: 100%;
            height: 100%;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .series-topics-item-content {
            padding: 12px 0.28rem 5px 0.28rem;
        }

        .series-topics-item-title {
            color: #222222;
            width: 4rem;
        }

        .series-topics-item-zt {
            color: #FF9523;
        }

        .series-topics-item-count {
            padding: 0 0.28rem;
            color: rgba(34, 34, 34, 0.45);
        }

        .series-topics-item-info {
            padding: 0 0.28rem;
        }

        .series-topics-item-info-wrap {
            padding-top: 12px;
        }

        .series-topics-item-info-dot {
            width: 0.08rem;
            height: 0.08rem;
            border-radius: 50%;
            background-color: #333333;
        }

        .series-topics-item-info-content {
            color: rgba(34, 34, 34, 0.7)
        }

        .series-topics {
            padding: .06rem 0.32rem
        }


    </style>
</head>
<body>

<div class="flex-column ff400 fspx14 h-100-p bg-white">
    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar pos-f"></div>
        <!--导航栏-->
        <div class="bg-main nav-bar pos-f flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fspx16"></span>
            </div>
            <div class="center-bar fspx16 ff500 line1">系列专题</div>
            <div class="right-bar">
            </div>
        </div>
    </div>

    <div class="flex-1 mescroll" id="mescroll">
        <div class="series-topics"></div>
    </div>
</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>

<script src="../../plugin/mescroll/js/mescroll.min.js"></script>

<script>
  let pm = {
    isScroll: false,
    pageNum: 1,
    pageSize: 10,
  }

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()

    //下拉刷新、滚动加载
    meScroll = Template.createMeScroll({
      id: 'mescroll', //区域ID
      pageNum: pm.pageNum,
      downCallback: reLoadPage, //下拉刷新入口
      upCallback: getVideoSeries //滚动加载入口
    })
  }

  function startPage(params) {
    $('#seriesReadCnt').html(params.readCnt)
  }

  function reLoadPage() {
    pm.pageNum = 1
    getVideoSeries()
  }

  //获取系列专题信息
  function getVideoSeries() {
    Server.seriesTopics.selectSysFuncInfoByParent({
      parentFuncCode: '002002',
      pageNum: pm.pageNum,
      pageSize: pm.pageSize
    }).then(function (data) {
      let htmlStr = ''
      let len = 0
      if (data.sysFunctionInfos && data.sysFunctionInfos.length > 0) {
        len = data.sysFunctionInfos.length
        data.sysFunctionInfos.forEach(function (item) {
          htmlStr += '<div class=\'series-topics-item flex-column mb30\'>'
          htmlStr += '<div class=\'flex-column\' onclick=\'goSeriesVideo("' + item.funcCode + '")\'>'
          htmlStr += '<div class=\'series-topics-item-img\'>'
          htmlStr += '<img src="' + item.coverImgUrl + '"/>'
          htmlStr += '</div>'
          htmlStr += '<div class=\'series-topics-item-content flex-row justify-content-between\'>'
          htmlStr += '<div class=\'series-topics-item-title fspx16 ff500 line1\'>' + item.funcName + '</div>'
          htmlStr += '<div class=\'series-topics-item-zt\'><span>进入专题</span><span class=\'iconfont iconjinru ml5\'></span></div>'
          htmlStr += '</div>'
          htmlStr += '<div class=\'series-topics-item-count fspx13 \'>'
          htmlStr += '<span>共' + item.articleCnt + '个视频</span>'
          htmlStr += '<span>  ·  </span>'
          htmlStr += '<span><span id="seriesReadCnt">' + item.readCnt + '</span>人已学习</span>'
          htmlStr += '</div>'
          htmlStr += '</div>'
          if (item.trainDtoList && item.trainDtoList.length > 0) {
            htmlStr += '<div class=\'series-topics-item-info\'>'
            item.trainDtoList.forEach(function (it) {
              let jsonStr = JSON.stringify({
                infoId: it.trainingId,
                infoType: '2',
                resourceType: '2'
              })
              htmlStr += '<div class=\'series-topics-item-info-wrap flex-row align-items-center\' onclick=\'goDetail(' + jsonStr + ')\'>'
              htmlStr += '<div class=\'series-topics-item-info-dot mr10\'></div>'
              htmlStr += '<div class=\'series-topics-item-info-content flex-1 line1\'>' + it.mainTitle + '</div>'
              htmlStr += '</div>'
            })
            htmlStr += '</div>'
          }
          htmlStr += '</div>'
        })

        if (pm.pageNum === 1) {
          $('.series-topics').html(htmlStr)
        } else {
          $('.series-topics').append(htmlStr)
        }

      }

      pm.pageNum++
      meScroll.endSuccess(len, len === pm.pageSize)
    }).catch((error) => {
      meScroll.endErr()
    })
  }

  function goSeriesVideo(funcCode) {
    jsBridge.openWindow('html/video/special-video.html?funcCode=' + funcCode, {}, {noBar: false})
  }

</script>
</html>
